

// {bem_b,bem_e,bem_m,VueAndNvueStyleAttr,when}
@use "./mixin/mixins.scss" as *;
@use './mixin/function.scss' as *;


	$e-loading-icon-host-font-size:0px !default;
	$e-loading-icon-host-line-height:1 !default;
	$e-loading-icon-vertical-margin:6px 0 0 !default;
	$e-loading-icon-dot-top:0 !default;
	$e-loading-icon-dot-left:0 !default;
	$e-loading-icon-dot-width:100% !default;
	$e-loading-icon-dot-height:100% !default;
	$e-loading-icon-dot-before-width:2px !default;
	$e-loading-icon-dot-before-height:25% !default;
	$e-loading-icon-dot-before-margin:0 auto !default;
	$e-loading-icon-dot-before-background-color:currentColor !default;
	$e-loading-icon-dot-before-border-radius:40% !default;


:host {
		font-size: $e-loading-icon-host-font-size;
		line-height: $e-loading-icon-host-line-height;
	}

@include bem_b(loading-icon) {
	@include bem_e(spinner){
		@include bem_m(spinner){
			animation-timing-function: steps(12)
		}
	}
	@include bem_e(text){
		&:empty {
			display: none
		}
	}


		&--vertical &__text {
			margin: $e-loading-icon-vertical-margin;
			@include VueAndNvueStyleAttr("color","text-color", "regular");
		}
	@include bem_e(dot){
		
			position: absolute;
			top: $e-loading-icon-dot-top;
			left: $e-loading-icon-dot-left;
			width: $e-loading-icon-dot-width;
			height: $e-loading-icon-dot-height;
		
			&:before {
				display: block;
				width: $e-loading-icon-dot-before-width;
				height: $e-loading-icon-dot-before-height;
				margin: $e-loading-icon-dot-before-margin;
				background-color: $e-loading-icon-dot-before-background-color;
				border-radius: $e-loading-icon-dot-before-border-radius;
				content: " "
			}
		
	}
	}

@for $i from 1 through 12 {
		.e-loading-icon__dot:nth-of-type(#{$i}) {
			transform: rotate($i * 30deg);
			opacity: 1 - 0.0625 * ($i - 1);
		}
	}

